<template>
  <div>
    <comcart>
      <div slot="body_name">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-input
              placeholder="请输入用户名"
              size="small"
              class="input-with-select"
              v-model="fromObj.query"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="query()"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="gosave()"
              >添加</el-button
            >
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" label="序号" width="50"> </el-table-column>
          <el-table-column prop="username" label="用户名" width="100">
          </el-table-column>
          <el-table-column prop="email" label="邮箱地址"> </el-table-column>
          <el-table-column prop="mobile" label="电话"> </el-table-column>
          <el-table-column prop="role_name" label="角色"> </el-table-column>
          <el-table-column prop="mg_state" label="状态">
            <template slot-scope="{ row }">
              <el-switch v-model="row.mg_state" @change="setState(row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300px">
            <template slot-scope="{ row }" >
              <el-button type="primary" size="small" @click="update(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="small" @click="del(row)"
                >删除</el-button
              >
              <el-button type="warning" size="small" @click="set(row)"
                >设置</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 添加按钮弹窗 -->
        <el-dialog title="用户信息维护" :visible.sync="dialogFormVisible">
          <el-form>
            <el-form-item label="用户名" label-width="100px">
              <el-input v-model="searchObj.username"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" label-width="100px">
              <el-input v-model="searchObj.email"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" label-width="100px">
              <el-input v-model="searchObj.mobile"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 修改按钮弹窗 -->
        <el-dialog title="用户信息维护" :visible.sync="isshow">
          <el-form>
            <el-form-item label="用户名" label-width="100px">
              <el-input v-model="saves.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" label-width="100px">
              <el-input v-model="saves.password"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址" label-width="100px">
              <el-input v-model="saves.email"></el-input>
            </el-form-item>
            <el-form-item label="联系方式" label-width="100px">
              <el-input v-model="saves.mobile"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isshow = false">取 消</el-button>
            <el-button type="primary" @click="sure()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 设置按钮弹窗 -->
        <el-dialog
          title="分配角色"
          :visible.sync="setshow"
          :close-on-click-modal="false"
        >
          <el-form :model="sets">
            <el-form-item label="用户名:">{{ sets.username }}</el-form-item>
            <el-form-item label="当前角色:">{{ sets.role_name }}</el-form-item>
            <el-form-item label="活动区域">
              <el-select v-model="sets.rid" placeholder="请选择角色">
                <el-option
                  v-for="(item, index) in rolelist"
                  :key="item.id"
                  :value="item.roleName"
                  :label="item.roleName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="setshow = false">取 消</el-button>
            <el-button type="primary" @click="setrole()">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromObj.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="fromObj.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :disabled="false"
        >
        </el-pagination>
      </div>
    </comcart>
  </div>
</template>

<script>
import comcart from "../../components/comcart";
export default {
  data() {
    return {
      rolelist: [],
      isshow: false,
      dialogFormVisible: false,
      setshow: false,
      total: 0,
      tableData: [],
      //渲染数据
      fromObj: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },

      sets: {
        id: 0,
        rid: "",
        role_name: "", //当前角色名称
        username: "", //当前用户名
      },

      saves: {
        id: 0,
        username: "",
        password: "",
        email: "",
        mobile: "",
      },

      searchObj: {
        id: 0,
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
    };
  },
  components: {
    comcart,
  },
  methods: {
     //修改状态
     async setState(row){
        let rst=await this.$http.put(`users/${row.id}/state/${row.mg_state}`)
        console.log(rst);
      },
    //数据渲染
    async query() {
      let rst = await this.$http.get("users", this.fromObj);
      console.log(rst.data);
      this.tableData = rst.data.users;
      console.log(this.tableData.length);
      this.total = rst.data.total;
    },
    //修改值回填
    async update(row) {
      this.dialogFormVisible = true;
      let rst = await this.$http.get(`users/${row.id}`);
      console.log(rst);
      let { username, email, mobile, id } = rst.data;
      this.searchObj.username = username;
      this.searchObj.email = email;
      this.searchObj.mobile = mobile;
      this.searchObj.id = id;
    },
    //确认修改
    async save() {
      this.dialogFormVisible = false;
      let rst = await this.$http.put(`users/${this.searchObj.id}`,this.searchObj);
      console.log(rst);
      this.query();
    },
    //添加
    gosave() {
      this.isshow = true;
      this.saves = {
        id: 0,
        username: "",
        password: "",
        email: "",
        mobile: "",
      };
    },
    async sure() {
      this.isshow = false;
      let rst = await this.$http.post("users", this.saves);
      console.log(rst);
      this.query();
    },
    //删除
    del(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let rst = await this.$http.delete(`users/${row.id}`);
          console.log(rst);
          this.query();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          if (this.tableData.length == 1) {
            if (this.fromObj.pagenum >= 1) {
              this.fromObj.pagenum--;
            }
          }
          this.query();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分配用户设置
    set(row) {
      console.log(row);
      this.setshow = true;
      let { id, role_name, username } = row;
      this.sets.id = id;
      this.sets.role_name = role_name;
      this.sets.username = username;
    },
    async setrole() {
      console.log(this.sets.role_name);
      let rst = await this.$http.put(`users/${this.sets.id}/role`,{
        rid:this.sets.rid
      });
      this.query()
      this.setshow = false
      console.log(rst);
    },

    async getrolelist() {
      let rst = await this.$http.get("roles");

      //将所有的角色信息赋值给rolelist属性
      this.rolelist = rst.data;
      console.log(this.rolelist);
    },
    //分页
    handleSizeChange(val) {
      this.fromObj.pagesize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.fromObj.pagenum = val;
      this.query();
    },
  },
  mounted() {
    this.query();
    this.getrolelist();
  },
};
</script>

<style lang="less" scoped>
</style>




